
<!--用来存放文件信息-->
<input id="pickfilesid" type="hidden" name="{{name}}" value="{{val}}"/>
{%if config.ext.attachment.type == 2%}
<link rel="stylesheet" href="/static/admin/js/qiniu/main.css" type="text/css">
<div id="container">
    <a class="btn btn-default " id="pickfiles" href="#" >
        <i class="glyphicon glyphicon-plus"></i>
        <span>选择文件</span>
    </a>
</div>
<div style="display:none" id="success" >
    <div class="alert-success">
        队列全部文件处理完毕
    </div>
</div>
<div >
    <table id="filetable" class="table table-striped table-hover text-left" data-id=""   style="margin-top:10px;display:{{'none' if val ==0}}">
        <thead>
        <tr>
            <th class="col-md-4">文件</th>
            <th class="col-md-2">大小</th>
            <th class="col-md-6">详情 <a href="#" class="text-info pull-right" id="delfile">删除</a> </th>
        </tr>
        </thead>
        <tbody id="fsUploadProgress">
        {%if val != 0%}
        <tr  class="progressContainer" style="opacity: 1;">
            <td class="progressName">{{val|get_file('name',false)}}<div class="Wrapper default"><div class="imgWrapper col-md-3"><img src="/static/admin/js/qiniu/default.png"></div></div></td>
            <td class="progressFileSize">{{val|get_file('size',false)}} kb</td>
            <td><div class="info"><div class=""><div><strong>Link:</strong><a target="_blank" href="{{val|get_file('savename',true)}}"> {{val|get_file('savename',true)}}</a></div>
                <div class="hash"><strong>Hash:</strong>{{val|get_file('sha1',false)}}</div></div>
            </div></td></tr>
        {%endif%}
        </tbody>
    </table>
</div>
<!--七牛-->
<script>
   var module = 'homefile';
</script>
<input type="hidden" id="domain" value="{{2|get_pdq}}/">
<script type="text/javascript" src="/static/admin/js/qiniu/plupload.full.min.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/zh_CN.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/qiniu.min.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/ui.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/main.js"></script>
<!--七牛-->
{%else%}
<link rel="stylesheet" href="/static/admin/js/webuploader/webuploader.css" type="text/css">
<div id="thelist_{{name}}" class="uploader-list"></div>
<div class="btns">
    <div id="picker_{{name}}" class="picker">选择文件</div>
    <a id="ctlBtn_{{name}}" class="btn btn-default">开始上传</a>
</div>
<script src="/static/admin/js/webuploader/webuploader.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function() {
        var $ = jQuery,
            $list_{{name}} = $('#thelist_{{name}}'),
            $btn_{{name}} = $('#ctlBtn_{{name}}'),
            state = 'pending',
            uploader_{{name}};

        uploader_{{name}} = WebUploader.create({

            // 不压缩image
            resize: false,

            // swf文件路径
            swf:'/static/admin/js/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '/ext/attachment/homefile/upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id:'#picker_{{name}}',
                multiple: false
            },
            fileNumLimit:1,

        });

        // 当有文件添加进来的时候
        uploader_{{name}}.on( 'fileQueued', function( file ) {

            $list_{{name}}.html( '<div id="' + file.id + '" class="alert alert-info">' +
                ' <button data-dismiss="alert" class="close remove-this" type="button">×</button>'+
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
            var $li_{{name}} = $( '#'+file.id );
            $li_{{name}}.on('click', '.remove-this', function() {
                uploader_{{name}}.removeFile( file.id );
//                                                                                 $list_{{name}}.html("");
            })

        });

        // 文件上传过程中创建进度条实时显示。
        uploader_{{name}}.on( 'uploadProgress', function( file, percentage ) {
            var $li_{{name}} = $( '#'+file.id ),
                $percent_{{name}} = $li_{{name}}.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent_{{name}}.length ) {
                $percent_{{name}} = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li_{{name}} ).find('.progress-bar');
            }

            $li_{{name}}.find('p.state').text('上传中');

            $percent_{{name}}.css( 'width', percentage * 100 + '%' );
        });

        uploader_{{name}}.on( 'uploadSuccess', function( file,res ) {
            var name = "{{name}}";
            $("input[name="+name+"]").val(res.id);
            $( '#'+file.id ).find('p.state').text('已上传,文件大小:'+res.size);
        });

        uploader_{{name}}.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader_{{name}}.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        uploader_{{name}}.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn_{{name}}.text('暂停上传');
            } else {
                $btn_{{name}}.text('开始上传');
            }
        });

        $btn_{{name}}.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader_{{name}}.stop();
            } else {
                uploader_{{name}}.upload();
            }
        });
    });

</script>
{%endif%}
